<template>
	<view class="page_view">
		<view class="zhanwei"></view>
		<view class="doctor_info" v-for="(item,index) in doctor_list">
			<view class="doctor_info_top flex1">
				<image :src="ImgUrl + item.avatar" class="doctor_info_top_left" mode=""></image>
				<view class="doctor_info_top_right">
					<view class="doctor_info_top_right_top">
						{{item.name}}
						<text class="doctor_info_top_right_top_desc">{{item.level.name}}</text>
					</view>
					<view class="doctor_info_top_right_bottom">{{item.hospital.name}}</view>
				</view>
			</view>
			<view class="doctor_info_item flex">
				<view class="doctor_info_item_left">科室名称</view>
				<view class="doctor_info_item_right">{{item.hospital.name}}</view>
			</view>
			<view class="doctor_info_item flex">
				<view class="doctor_info_item_left">咨询时间</view>
				<view class="doctor_info_item_right">{{date}} {{week}}</view>
			</view>
			<view class="doctor_info_item flex">
				<view class="doctor_info_item_left">问诊类型</view>
				<view class="doctor_info_item_right">{{type == 0?'图文问诊':type == 1?'视频问诊':type == 2?'飞刀问诊':'多人问诊'}}</view>
			</view>
			<view class="doctor_info_item flex">
				<view class="doctor_info_item_left">服务费</view>
				<view class="doctor_info_item_right">{{type == 0?item.tag1_price:type == 1?item.tag2_price:type == 2?item.tag3_price:item.tag4_price}}元</view>
			</view>
			<view class="doctor_info_item flex">
				<view class="doctor_info_item_left">优惠券</view>
				<view class="doctor_info_item_right" v-if="false">暂无</view>
				<view class="doctor_info_item_right flex1" @click="go_choose_coupon">
					<view class="doctor_info_item_right_money">{{coupondata&&Object.keys(coupondata).length>0?coupondata.coupon.price:0}}</view>
					<u-icon name="arrow-right" color="#999999;" size="12"></u-icon>
				</view>
			</view>
			<view class="doctor_info_item_add_doctor" v-if="index == doctor_list.length -1" @click="choose_doctor">
				添加更多医师
			</view>
		</view>
		<view class="xing_title">*选择就诊人</view>
		<view class="choose_people flex1">
			<view class="choose_people_item choose_people_itema_ctive" v-for="(item,index) in patient_list">
				<view class="choose_people_item_top">{{item.name}}</view>
				<view class="choose_people_item_bottom">
					{{item.gender}}
					<text style="margin: 0 10rpx">|</text>
					{{item.age}}
				</view>
			</view>
			<view class="choose_people_item flex1" @click="choose_patient">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/add_people.png" class="choose_people_item_icon" mode=""></image>
			</view>
		</view>
		<view class="xing_title">*选择就诊人症状</view>
		<view class="zhengzhuang flex1">
			<view :class="['zhengzhuang_item', item.active ? 'zhengzhuang_item_active' : '']" v-for="(item, index) in symptom" 
			@click="choose_symptom(item, index)" :key="index">
				{{item.name}}
			</view>
		</view>
		<!-- <view class="xing_title">*选择时长(小时)</view> -->
		<view class="xing_title">*问诊时长(小时)</view>
		<view class="choose_time">
			<!-- @click="getTime" -->
			<input type="text" class="list_item_input" placeholder-style="color: #CCC;" v-model="time" placeholder="选择就诊时长" disabled="disabled"/>
		</view>
		<view class="xing_title">*描述病症</view>
		<textarea v-model="describe" placeholder="请简短描述您的问题" placeholder-style="color: #CCC;" class="textarea"></textarea>
		<view class="xing_title">*上传病例材料</view>
		<view class="bingli flex1">
			<image :src="cailiao" class="bingli_img" mode="" v-if="cailiao"></image>
			<image @click="getImage" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/add_people.png" class="choose_people_item_icon" mode="" v-else></image>
		</view>

		<view class="bottom flex">
			<view class="" style="color: #e5432e; align-items: baseline">
				<text class="fs-32">¥</text>
				<text class="fs-52">{{ jiage | pointsPrice }}</text>
				<text class="fs-32">.{{ jiage | pointsPrice(1) }}</text>
			</view>
			<view class="bottom_right" @click="go_Consultation">
				确认支付 发起问诊
			</view>
		</view>
		<u-picker :show="show" @confirm="submit" @cancel="cancel" :columns="columns"></u-picker>
	</view>
</template>

<script>
	import { consultationHandle, symptoms } from '../../api/common.js';
import { pointsPrice } from '@/utils/util1.js';
import uploadImage from '@/common/ossutil/ossutil/uploadFile.js';
export default {
	data() {
		return {
			show: false,
			type: null,
			jiage: 0,
			coupondata: {},
			describe: '',
			cailiao: '',
			patient_list:[],
			doctor_list:[],
			symptom: [],
			symids:[],
			file:'',
			time: '24',
			columns: [
				['6', '12', '24']
			],
			date:'',
			week:'',
		};
	},
	filters: {
		pointsPrice
	},
	onLoad(op) {
		if(op.data){
			this.doctor_list.push(JSON.parse(op.data));
			this.type = op.type;
		}
		for(let i=0;i<this.doctor_list.length;i++){
			let item = this.doctor_list[i];
			this.jiage += this.type == 0?item.tag1_price:this.type == 1?item.tag2_price:this.type == 2?item.tag3_price:item.tag4_price;
		}
		this.getDate();
	},
	computed:{
		ImgUrl(){
			console.log(this.$store.state.ImgUrl)
			return this.$store.state.ImgUrl
		},
	},
	mounted() {
		this.getSym();
		
	},
	methods: {
		getDate(){
			const currentDate = new Date();
			const year = currentDate.getFullYear(); // 获取年份
			const month = currentDate.getMonth() + 1; // 获取月份（注意月份是从0开始计数的，所以要加1）
			const day = currentDate.getDate(); // 获取日期
			const dayOfWeek = ["日", "一", "二", "三", "四", "五", "六"][currentDate.getDay()]; // 获取星期几（0表示星期日，1表示星期一，以此类推）
			this.date = year + '年' + month + '月' + day + '日';
			this.week = '周'+dayOfWeek;
		},
		getImage(type){
			let that = this;
			console.log('12');
			uni.chooseImage({
				sourceType:['album','camera'],
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				count: 1,
				success: (res)=>{
					console.log(res,'123');
					let path = res.tempFilePaths[0];
					uploadImage(path,'','wechat/', res => {
						console.log(res,'1234');
						that.cailiao = res.imgUrl;
						that.file = res.imgName;
					});
				},
				fail:res=>{
					console.log(res,'123456')
				}
			});
		},
		cancel(){
			this.show = false;
		},
		submit(e){
			console.log('confirm', e)
			this.show = false;
			this.time = e.value[0];
		},
		getTime(){
			this.show = true;
		},
		getSym(){
			symptoms().then(res=>{
				if(res.code == 200001){
					this.symptom = res.data;
				}
			})
		},
		go_choose_coupon() {
			uni.navigateTo({
				url: '/pages/coupon/coupon?type=use'
			});
		},
		choose_symptom(item, index) {
			this.$set(this.symptom[index], 'active', !this.symptom[index].active);
			this.symids.push(item.id);
		},
		choose_time() {},
		choose_patient(){
			uni.navigateTo({
				url:'/pages/NewDrugUsers/NewDrugUsers?isxuan=1'
			})
		},
		choose_img(){
			uni.chooseImage({
				count:1,
				success(res) {
					this.file = res.tempFilePaths[0];
				}
			})
		},
		choose_doctor(){
			uni.navigateTo({
				url:'/subPages/Department/Department'
			})
		},
		go_Consultation(){
			let arrString = this.doctor_list.map(item => item.id).join(',');
			let params = {
				type: Number(this.type) + 1,
				partner_id: this.patient_list[0].id,
				symptom_ids: this.symids.join(','),
				symptom_customize: this.describe,
				files: this.file,
				coupon_id: this.coupondata&&this.coupondata.coupon?this.coupondata.coupon.id:'',
				service_time: this.time,
				doctor_ids: arrString
			}
			consultationHandle(params).then(res=>{
				if(res.code == 200001){
					uni.navigateTo({
						url:'/pages/Consultation/Consultation?id=' + res.data.id
					})
				}
			})
			
		}
	}
};
</script>

<style>
	.list_item_input{
		height: 82rpx;
		width: 400rpx;
		color: #000;
		font-family: Source Han Sans SC;
		font-size: 26rpx;
		font-weight: 400;
	}
page {
	background: #f4f4f4;
	padding: 0 30rpx;
	box-sizing: border-box;
	padding-bottom: 200rpx;
}
.zhanwei {
	width: 100%;
	height: 20rpx;
}
.doctor_info:first-child{
	margin-top: 0;
}
.doctor_info {
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	border-radius: 20rpx;
	background: #fff;
	margin-top: 20rpx;
}
.doctor_info_top_left {
	width: 90rpx;
	height: 90rpx;
	border-radius: 12rpx;
	background: #ccc;
}
.doctor_info_top_right {
	margin-left: 20rpx;
}
.doctor_info_top_right_top {
	color: #333;
	font-family: Alibaba PuHuiTi 2;
	font-size: 32rpx;
	font-weight: 400;
}
.doctor_info_top_right_top_desc {
	color: #444;
	font-family: Alibaba PuHuiTi 2;
	font-size: 26rpx;
	font-weight: 400;
	margin-left: 4rpx;
}
.doctor_info_top_right_bottom {
	color: #999;
	font-family: Alibaba PuHuiTi 2;
	font-size: 26rpx;
	font-weight: 400;
	margin-top: 14rpx;
}
.doctor_info_item {
	margin-top: 20rpx;
}
.doctor_info_item_left {
	color: #999;
	font-family: Alibaba PuHuiTi 2;
	font-size: 24rpx;
	font-weight: 400;
}
.doctor_info_item_right {
	color: #333;
	text-align: right;
	font-family: Alibaba PuHuiTi 2;
	font-size: 24rpx;
	font-weight: 400;
}
.doctor_info_item_right_money {
	color: #0165fb;
}
.xing_title {
	margin-top: 40rpx;
	color: #666;
	font-family: Alibaba PuHuiTi 2;
	font-size: 24rpx;
	font-weight: 400;
}
.choose_people {
	flex-wrap: wrap;
}
.choose_people_item {
	width: 216rpx;
	height: 122rpx;
	border-radius: 16rpx;
	background: #fff;
	margin-top: 30rpx;
	margin-right: 22rpx;
	padding: 20rpx 28rpx;
	box-sizing: border-box;
}
.choose_people_item_icon {
	display: block;
	margin: 0 auto;
	width: 30rpx;
	height: 30rpx;
}
.choose_people_itema_ctive {
	border: 1px solid #0165fb;
}
.choose_people_item_top {
	color: #333;
	font-family: Alibaba PuHuiTi 2;
	font-size: 32rpx;
	font-weight: 400;
}
.choose_people_item_bottom {
	color: #999;
	font-family: Alibaba PuHuiTi 2;
	font-size: 24rpx;
	font-weight: 400;
	margin-top: 4rpx;
}
.zhengzhuang {
	flex-wrap: wrap;
}
.zhengzhuang_item {
	display: inline-flex;
	padding: 14rpx 20rpx;
	color: #999;
	font-family: Alibaba PuHuiTi 2;
	font-size: 24rpx;
	font-weight: 400;
	border-radius: 12rpx;
	background: #fff;
	color: #999;
	font-family: Alibaba PuHuiTi 2;
	font-size: 24rpx;
	font-weight: 400;
	margin-top: 20rpx;
	margin-right: 20rpx;
}
.zhengzhuang_item_active {
	background: #0165fb;
	color: #fff;
}
.choose_time {
	width: 100%;
	height: 82rpx;
	line-height: 82rpx;
	padding-left: 20rpx;
	border-radius: 16rpx;
	box-sizing: border-box;
	background: #fff;
	color: #999;
	font-family: Alibaba PuHuiTi 2;
	font-size: 24rpx;
	font-weight: 400;
	margin-top: 34rpx;
}
.textarea {
	height: 266rpx;
	padding: 30rpx;
	box-sizing: border-box;
	width: 100%;
	border-radius: 16rpx;
	background: #fff;
	font-size: 30rpx;
	font-weight: 400;
	margin-top: 30rpx;
}
.bingli {
	width: 100%;
	height: 266rpx;
	border-radius: 16rpx;
	background: #fff;
	margin-top: 30rpx;
}
.bingli_img {
	width: 100%;
	height: 100%;
	border-radius: 16rpx;
}
.bottom {
	width: 100%;
	height: 140rpx;
	background-color: #f4f4f4;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;
}
.fs-52 {
	font-size: 52rpx;
}
.fs-32 {
	font-size: 32rpx;
}
.bottom_right{
	width: 522rpx;
	height: 78rpx;
	line-height: 78rpx;
	text-align: center;
	color: #FFF;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 30rpx;
	font-weight: 400;
	border-radius: 68rpx;
	background:#0165FB;
}
.doctor_info_item_add_doctor{
	width: 100%;
	height: 66rpx;
	border-radius: 68rpx;
	background:#0165FB;
	line-height: 66rpx;
	text-align: center;
	color: #FFF;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	margin-top: 20rpx;
}
</style>
